<template>
  <div class="map">
    <div class="flex-bet seBox">
      <el-input
        v-model="addressKeyword"
        placeholder="请输入地址来直接查找相关位置"
        class="searchInput"
      ></el-input>
      <span class="lnglat">经度：{{ location.lng }}</span>
      <span class="lnglat">纬度：{{ location.lat }}</span>
    </div>
    <baidu-map
      class="bmView"
      :scroll-wheel-zoom="true"
      :center="loc"
      :zoom="zoom"
      @click="getLocationPoint"
      ak="YOUR_APP_KEY"
    >
      <bm-view style="width: 100%; height: 500px"></bm-view>
      <bm-local-search
        class="searchView"
        :keyword="addressKeyword"
        :auto-viewport="true"
      ></bm-local-search>
    </baidu-map>
  </div>
</template>
<script>
export default {
  name: "Map",
  props: {
    loc: { type: Object, default: () => ({ lng: 116.404, lat: 39.915 }) },
  },
  data() {
    return {
      location: {
        lng: "",
        lat: "",
      },
      zoom: 18,
      addressKeyword: "",
    };
  },
  methods: {
    getLocationPoint(e) {
      this.location.lng = e.point.lng;
      this.location.lat = e.point.lat;
      this.$emit("selectLocation", { ...this.location });
    },
  },
};
</script>
<style lang="less" scoped>
.seBox {
  margin-bottom: 10px;
}
.bmView {
  height: 500px;
  position: relative;
}
.searchInput {
  width: 500px;
}
.searchView {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  max-height: 300px;
  width: 600px;
  background: #fff;
  overflow-y: scroll;
  display: none;
}
.lnglat{
  display: inline-block;
  width: 150px;
}
</style>